window.onload = function () {
  var root = document.querySelector(".root");
  var block = document.querySelectorAll(".block");
  var moveblock;
  var rootWidth = root.clientWidth;
  var rootHeight = root.clientHeight;
  var rootTop = root.style.top;
  var rootLeft = root.style.left;
  root.onmousedown = function (event) {
    var event = event || window.event; //兼容IE浏览器
    var diffX = event.clientX - root.offsetLeft;
    var diffY = event.clientY - root.offsetTop;
    if (typeof root.setCapture !== "undefined") {
      root.setCapture();
    }
    document.onmousemove = function (event) {
      var event = event || window.event;
      var moveX = event.clientX - diffX;
      var moveY = event.clientY - diffY;
      if (moveX < 0) {
        moveX = 0;
      } else if (moveX > window.innerWidth - root.offsetWidth) {
        moveX = window.innerWidth - root.offsetWidth;
      }
      if (moveY < 0) {
        moveY = 0;
      } else if (moveY > window.innerHeight - root.offsetHeight) {
        moveY = window.innerHeight - root.offsetHeight;
      }
      root.style.left = moveX + "px";
      root.style.top = moveY + "px";
    };
    document.onmouseup = function (event) {
      rootLeft = root.style.left;
      rootTop = root.style.top;
      this.onmousemove = null;
      this.onmouseup = null;
      //修复低版本ie bug
      if (typeof root.releaseCapture != "undefined") {
        root.releaseCapture();
      }
    };
  };
  block.forEach((item) => {
    item.onmousedown = function (event) {
      event.stopPropagation();
      moveblock = item.getAttribute("class").split(" ")[1];
      var itemevent = event || window.event;
      var itemdiffX = itemevent.clientX;
      var itemdiffY = itemevent.clientY;
      if (typeof root.setCapture !== "undefined") {
        root.setCapture();
      }
      document.onmousemove = function (event) {
        var itemmoveevent = event || window.event;
        var moveX = itemmoveevent.clientX - itemdiffX;
        var moveY = itemmoveevent.clientY - itemdiffY;
        switch (moveblock) {
          case "rightbottom":
            if (rootWidth + ~moveX > 200) {
              if (rootLeft) {
                root.style.left = parseInt(rootLeft) + moveX + "px";
              } else {
                root.style.left = moveX + "px";
              }
              root.style.width = rootWidth + ~moveX + "px";
            }
            if (rootHeight + moveY > 200) {
              root.style.height = rootHeight + moveY + "px";
            }
            break;
          case "righttop":
            if (rootWidth + moveX > 200) {
              root.style.width = rootWidth + moveX + "px";
            }
            if (rootHeight + ~moveY > 200) {
              if (rootTop) {
                root.style.top = parseInt(rootTop) + moveY + "px";
              } else {
                root.style.top = moveY + "px";
              }
              root.style.height = rootHeight + ~moveY + "px";
            }
            break;
          case "lefttop":
            if (rootWidth + ~moveX > 200) {
              if (rootLeft) {
                root.style.left = parseInt(rootLeft) + moveX + "px";
              } else {
                root.style.left = moveX + "px";
              }
              root.style.width = rootWidth + ~moveX + "px";
            }
            if (rootHeight + ~moveY > 200) {
              if (rootTop) {
                root.style.top = parseInt(rootTop) + moveY + "px";
              } else {
                root.style.top = moveY + "px";
              }
              root.style.height = rootHeight + ~moveY + "px";
            }
            break;
          case "leftbottom":
            if (rootWidth + moveX > 200) {
              root.style.width = rootWidth + moveX + "px";
            }
            if (rootHeight + moveY > 200) {
              root.style.height = rootHeight + moveY + "px";
            }
            break;
          default:
            break;
        }
      };
      document.onmouseup = function (event) {
        rootLeft = root.style.left;
        rootTop = root.style.top;
        rootWidth = root.clientWidth;
        rootHeight = root.clientHeight;
        this.onmousemove = null;
        this.onmouseup = null;
        if (typeof item.releaseCapture != "undefined") {
          item.releaseCapture();
        }
      };
    };
  });
};
